<template>
    <div class="app-view">
        <vxe-grid id="xGrid"
                  :loading="tableLoading"
                  ref="xGrid"
                  border
                  resizable
                  show-overflow
                  keep-source
                  highlight-hover-row
                  :height="tableH"
                  align="center"
                  :print-config="{}"
                  :import-config="{}"
                  :export-config="{}"
                  :custom-config="{ storage: true }"
                  :toolbar-config="tableToolbar"
                  :columns="tableColumn"
                  :seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize,}"
                  :pager-config="tablePage"
                  :data="tableData"
                  @page-change="handlePageChange"
                  @checkbox-change="checkboxChange"
                  @checkbox-all="checkboxAll">
            <template v-slot:toolbar_buttons>
                <div class="tableToolbar">
                    <div style="min-width:80px" class="tableToolbarText tableToolbarTextL">文件名称：</div>
                    <el-input v-model="searchName" size="small" style="margin-inline-start:8px;width:50%;" :placeholder="placeholder"
                              clearable @clear="getData(0)" @change="getData(0)" />
                    <vxe-button style="min-width:55px;margin-left:8px" status="primary" size="small" class="tableToolbarTextL searchButton"
                                @click="getData(0)">查询</vxe-button>
                    <vxe-button style="min-width: 55px; margin-left: 8px" status="primary" class="tableToolbarTextL addButton" size="small"
                                @click="showSelectCon">新增</vxe-button>
                </div>
            </template>
            <template #operate="{ row }">
                <el-link type="primary" class="elLinkBTN" @click="downloadFile(row)">下载</el-link>
                <!--<el-link type="danger" class="elLinkBTN" @click="deleteDe(row)">删除</el-link>-->
            </template>
            <template v-slot:current_pageNum>
            </template>
        </vxe-grid>
        <!--<selectContractor ref="selectContractor" @selectCon="selectCon"></selectContractor>-->
    </div>
</template>
<script>
    //import selectContractor from '../../components/UniyCapabilitySelect/ContractorIndexGet.vue';
    import templateFileAPI from '../../request/DataManage/TemplateFileAPI.js';
    export default {
        components: {
            //selectContractor
        },
        name: 'GZFX',
        data() {
            return {
                tableData: [],
                tableH: window.innerHeight - topBarHeight - 80,

                activeName: null,
                numName: null,
                tableLoading: false,
                searchName: null,
                placeholder: "请输入",
                selectedItems: [],
                tableColumn: [
                    { field: 'checkbox', type: 'checkbox', title: '', visible: true, fixed: 'left', width: 70 },
                    { type: "seq", title: "序号", width: 70, fixed: "left" },
                    { field: "exportUName", minWidth: 120, title: "导出人" },
                    { field: "exportTime", minWidth: 130, title: "导出时间", formatter: ({ row }) => { return this.toDate(row.exportTime) } },
                    { field: "fileName", minWidth: 120, title: "文件名称" },
                    { title: "操作", fixed: "right", width: 100, slots: { default: "operate" }, },
                ],
                tableToolbar: {
                    refresh: {
                        query: () => this.getData(0),
                    },
                    import: false,
                    export: false,
                    print: false,
                    custom: true,
                    slots: {
                        buttons: "toolbar_buttons",
                    },
                },
                tableData: [],
                tablePage: {
                    total: 0,
                    currentPage: 1,
                    pageSize: 50,
                    align: "right",
                    pageSizes: [50, 80],
                    layouts: [
                        "Sizes",
                        "PrevJump",
                        "PrevPage",
                        "JumpNumber",
                        "NextPage",
                        "NextJump",
                        "FullJump",
                        "Total",
                    ],
                    perfect: true,
                    slots: {
                        right: 'current_pageNum'
                    }
                },
                otherFaultShow: false,
                showCreate: false,
                formTitle: '',
                formInfo: {},
                formItems: [
                    { field: 'name', title: '项目名称', span: 24, itemRender: { name: '$input', props: { placeholder: '名称' } } },
                    { field: 'code', title: '项目编号', span: 24, itemRender: { name: '$input', props: { placeholder: '编号' } } },
                    { field: 'user', title: '负责人', span: 12, itemRender: { name: '$input', props: { placeholder: '负责人' } } },
                    { field: 'department', title: '负责部门', span: 12, itemRender: { name: '$select', options: null } },
                    { field: 'desc', title: '项目说明', span: 24, itemRender: { name: '$input', props: { placeholder: '项目说明' } } },
                    { field: 'startTime', title: '计划开始时间', span: 12, slots: { default: 'planStartTime' } },
                    { field: 'endTime', title: '计划结束时间', span: 12, slots: { default: 'planEndTime' } },
                    { field: 'remark', title: '备注', span: 24, itemRender: { name: '$input', props: { placeholder: '备注' } } },
                ],
                formRules: {
                    name: [{ required: true, message: '请填写船型名称' }],
                    department: [{ required: true, message: '请选择船舶系列' }],
                },
                editIndex: 0,
                conNameData: []
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData(type) {
                if (type === 0) {
                    this.tablePage.currentPage = 1;
                };
                var whereStr = " 1=1 ";

                if (!!this.searchName) {
                    whereStr += " and fileName like '%" + this.searchName.trim() + "%' ";
                }
                var data = {
                    pageIndex: this.tablePage.currentPage - 1,
                    pageSize: this.tablePage.pageSize,
                    selector: "",
                    where: whereStr,
                    sort: "",
                    isAsc: false,
                    firstPK: 0,
                    lastPK: 0,
                    isDebugSQL: false,
                };
                this.tableLoading = true;
                templateFileAPI.getAllQuery(data).then(res => {
                    this.tableData = res.result;
                    this.tablePage.total = res.recordCount;
                    this.tableLoading = false;
                }).catch(err => {
                    this.tableLoading = false;
                });
            },
            //选承制单位
            showSelectCon() {
                this.$refs.selectContractor.show();
            },
            selectCon(data) {
                this.conNameData = data;
                var arr = data.map(x => x.conID)
                let loadingFullScreen = this.$loading({
                    lock: true,
                    text: '正在数据模板导出',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.3)'
                });
                templateFileAPI.exportExcel(arr).then(res => {
                    loadingFullScreen.close();
                    this.getData(0);
                }).catch(err => {
                    loadingFullScreen.close();
                });
            },

            deleteDe(row) {
                this.$confirm(`是否删除 ${row.toolName} 的信息`, "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.tableLoading = true;
                        templateFileAPI.deleteDe(row.exportID).then((res) => {
                            if (!res) {
                                this.tableLoading = false;
                                this.$message({ type: "warning", message: "删除失败!" });
                            } else {
                                this.tableLoading = false;
                                this.$message({ type: "success", message: "删除成功!" });
                                this.getData();
                            }
                        }).catch(err => {
                            this.tableLoading = false;
                        });
                    })
                    .catch(() => { });
            },

            downloadFile(row) {
                templateFileAPI.downLoadFiles(row.exportID).then(res => {
                    const blob = new Blob([res], { type: 'application/zip;charset=utf-8' });
                    if ('download' in document.createElement('a')) {
                        // 非IE下载
                        const elink = document.createElement('a');
                        elink.download = row.fileName;
                        elink.style.display = 'none';
                        elink.href = URL.createObjectURL(blob);
                        document.body.appendChild(elink);
                        elink.click();
                        URL.revokeObjectURL(elink.href);
                        document.body.removeChild(elink);
                    } else {
                        // IE10+下载
                        navigator.msSaveBlob(blob,row.fileName);
                    };
                })
            },
            handleClick(event) {
                //this.numName = event.label;
            },
            handlePageChange({ currentPage, pageSize }) {
                this.tablePage.currentPage = currentPage;
                this.tablePage.pageSize = pageSize;
                this.getData();
            },
            checkboxChange() {
                this.selectedItems = this.$refs.xGrid.getCheckboxRecords();
            },
            checkboxAll() {
                this.selectedItems = this.$refs.xGrid.getCheckboxRecords(true);
            },
            toDate(date) {
                return date ? moment(date).format('YYYY-MM-DD') : '';
            },

        },
        template: "#template"
    }
</script>

<style>
</style>